* {
  padding: 0;
  margin: 0;
  font-family: "Microsoft YaHei";
}

/** 清除内外边距 **/
html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
  dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
  pre, /* text formatting elements 文本格式元素 */
  form, fieldset, legend, button, input, textarea, select, /* form elements 表单元素 */
  th, td /* table elements 表格元素 */ {
  margin: 0;
  padding: 0;
}

/** 设置默认字体 **/
body,
  button, input, select, textarea /* for ie */ {
  font: 12px/1.5;
}
address,
cite,
dfn,
em,
var {
  font-style: normal;
} /* 将斜体扶正 */
code,
kbd,
pre,
samp {
  font-family:
    courier new,
    courier,
    monospace;
} /* 统一等宽字体 */
small {
  font-size: 12px;
} /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
ul,
ol {
  list-style: none;
}
/** 重置文本格式元素 **/
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/** 重置表单元素 **/
legend {
  color: #000;
} /* for ie6 */
fieldset,
img {
  border: 0;
} /* img 搭车：让链接里的 img 无边框 */
button,
input,
select,
textarea {
  font-size: 100%;
} /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 清除浮动 */
.ks-clear:after,
.clear:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

#root,
#app,
html,
body {
  height: 100%;
}
* {
  ::-webkit-scrollbar {
    width: 6px; /*滚动条宽度*/
    height: 6px; /*滚动条高度*/
  }
  ::-webkit-scrollbar-track {
    background-color: #f5f5f5; /*滚动条整体背景色*/
  }
  ::-webkit-scrollbar-thumb {
    background-color: #c1c1c1; /*滚动条内部填充色*/
    border-radius: 10px; /*滚动条四个角的圆角半径*/
  } /* Firefox浏览器 */
  scrollbar-width: thin; /*滚动条宽度*/
  scrollbar-color: #c1c1c1 #f5f5f5; /*滚动条内部填充色和滚动条整体背景色*/
}

// 页面容器样式
.page-container {
  width: 100%;
  display: flex;
  overflow: hidden;
  padding: 1px 6px 6px 6px;
}

// 上下布局容器样式
.page-container-vertical {
  @extend .page-container;
  flex-direction: column;
}

// 上下布局，下边容器
.bottom-container {
  flex-grow: 1;
}

// 左右布局，右边容器（右边上下布局）
.right-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

// 左右布局，左边容器
.left-container {
  @extend .item-margin-right;
  width: 24%;
  min-width: 300px;
}

// 元素之间的间距(上下取上元素设置下边距)
.item-margin-bottom {
  margin-bottom: 6px;
}
// 元素之间的间距(左右取左元素设置右边距)
.item-margin-right {
  margin-right: 6px;
}
